<template>
  <!-- 通知信息内容 -->
  <div class="user_panel_list">
    <!-- 用户回复了你 -->
    <div class="user_panel" v-if="is_reply > 0">
      <router-link class="user_link" :to="'/PersonView/' + opr_user_id">
        <div class="user_av">
          <img :src="user_img" alt="" />
        </div>
      </router-link>
      <router-link class="user_link" :to="'/PostView/' + post_id">
        <div class="user_p">
          <!-- 用户信息 -->
          <div class="user_acc_p">
            <!-- 用户名账号 -->
            <div class="user_na">
              <div class="user_n">
                <span class="un">{{ user_nickname }}</span
                ><span>{{ $t('notify.txt_reply_you') }}</span>
              </div>
            </div>
          </div>
          <!-- 该用户回复了你 -->
          <div class="post_info" v-html="post_content"></div>
        </div>
      </router-link>
    </div>
    <!-- 该用户点赞了你的帖子 -->
    <div class="user_panel" v-if="is_liked > 0">
      <router-link class="user_link" :to="'/PostView/' + post_id">
        <div class="user_like">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <g>
              <path
                d="M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"
              ></path>
            </g>
          </svg>
        </div>
      </router-link>
      <div class="user_p">
        <!-- 用户信息 -->
        <div class="user_acc_p">
          <!-- 用户名账号 -->
          <div class="user_na">
            <router-link class="user_link" :to="'/PersonView/' + opr_user_id">
              <div class="userheader">
                <img :src="user_img" alt="" />
              </div>
            </router-link>
            <router-link class="user_link" :to="'/PostView/' + post_id">
              <div class="user_n">
                <span class="un">{{ user_nickname }}</span
                ><span>{{ $t('notify.txt_like_you') }}</span>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 该用户转发了你的帖子 -->
    <div class="user_panel" v-if="is_quote > 0">
      <router-link class="item_link" :to="'/PostView/' + post_id">
        <div class="user_quote">
          <svg viewBox="0 0 24 24">
            <g>
              <path
                d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.9-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.9 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"
              ></path>
            </g>
          </svg>
        </div>
        <div class="user_p">
          <!-- 用户信息 -->
          <div class="user_acc_p">
            <!-- 用户名账号 -->
            <div class="user_na">
              <router-link class="user_link" :to="'/PersonView/' + opr_user_id">
                <div class="userheader">
                  <img :src="user_img" alt="" />
                </div>

                <div class="user_n">
                  <span class="un">{{ user_nickname }}</span
                  ><span>{{ $t('notify.txt_quote_you') }}</span>
                </div>
              </router-link>
            </div>
          </div>
          <!-- 该用户回复了你 -->
          <router-link class="user_link" :to="'/PostView/' + post_id">
            <div class="post_info" v-html="post_content"></div>
          </router-link>
        </div>
      </router-link>
    </div>
    <!-- 该用户关注了你 -->
    <div class="user_panel" v-if="is_foyou > 0">
      <router-link class="item_link" :to="'/PersonView/' + opr_user_id">
        <div class="user_fo">
          <svg viewBox="0 0 24 24">
            <g>
              <path
                d="M17.863 13.44c1.477 1.58 2.366 3.8 2.632 6.46l.11 1.1H3.395l.11-1.1c.266-2.66 1.155-4.88 2.632-6.46C7.627 11.85 9.648 11 12 11s4.373.85 5.863 2.44zM12 2C9.791 2 8 3.79 8 6s1.791 4 4 4 4-1.79 4-4-1.791-4-4-4z"
              ></path>
            </g>
          </svg>
        </div>
        <div class="user_p">
          <!-- 用户信息 -->
          <div class="user_acc_p">
            <!-- 用户名账号 -->
            <div class="user_na">
              <div class="userheader">
                <img :src="user_img" alt="" />
              </div>
              <div class="user_n">
                <span class="un">{{ user_nickname }}</span
                ><span>{{ $t('notify.txt_fo_you') }}</span>
              </div>
            </div>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>
  <script>
export default {
  name: "NotifyItemComponents",
  props: {
    userData: Object,
    msg: String,
  },
  data() {
    return {
      user_id: this.userData.user_id ? this.userData.user_id : 1,
      opr_user_id: this.userData.opr_user_id ? this.userData.opr_user_id : 1,
      post_id: this.userData.post_id ? this.userData.post_id : 1,
      user_img: this.userData.user_headimg
        ? this.userData.user_headimg
        : require("@/assets/img/user.png"),
      user_nickname: this.userData.user_nickname
        ? this.userData.user_nickname
        : "昵称",
      username: this.userData.username ? this.userData.username : "账号",
      is_reply: this.userData.is_reply ? this.userData.is_reply : 0,
      is_quote: this.userData.is_quote ? this.userData.is_quote : 0,
      is_liked: this.userData.is_liked ? this.userData.is_liked : 0,
      is_foyou: this.userData.is_foyou ? this.userData.is_foyou : 0,
      post_content: this.userData.post_content
        ? this.addTagToLink(this.replace_em(this.userData.post_content))
        : "",
    };
  },
  mounted() {},
  methods: {
    //格式化表情包显示结果
    replace_em(str) {
      str = str.replace(/\</g, "&lt;");

      str = str.replace(/\>/g, "&gt;");

      str = str.replace(/\n/g, "<br/>");

      str = str.replace(
        /\[2023_([0-9]*)\]/g,
        '<img class="emot" src="/emot/2023_$1.png" border="0" />'
      );

      return str;
    },
    //递归算法替换#标签内的内容
    addTagToLink(str) {
      let reg = /(?:#)(.[^#]*)(?:#)/g;

      let tagLink = str.match(reg);
      let finalStr = "";
      finalStr = str;
      if (!tagLink) {
        //没有匹配
        // console.log(str);
        return str;
      } else {
        tagLink.forEach((item) => {
          const content =
            '<a class="title_link" href="/#/Search?q=' +
            item.replaceAll("#", "%23") +
            '">' +
            item +
            "</a>";
          //对需要替换的字符串多次替换
          finalStr = finalStr.replace(item, content);
        });
        return finalStr;
      }
    },
  },
};
</script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.user_panel_list {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  border-bottom: 1px solid rgb(239, 243, 244);
}
.user_panel {
  display: flex;
  max-width: 568px;
  width: 100%;
  margin: 16px 0;
}

.user_av {
  display: flex;
  width: 52px;
  height: 52px;
  margin-right: 16px;
}

.user_av img {
  border-radius: 50%;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
}

.user_p {
  width: 100%;
}

.user_acc_p {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex: 1;
}

.user_nick {
  display: flex;
  font-size: 16px;
  font-weight: 700;
  margin: 5px 0;
}

.user_acc {
  display: flex;
  font-size: 16px;
  color: #939393;
}

.user_link {
  color: rgb(0, 0, 0);
}

.item_link {
  display: flex;
  width: 100%;
  color: rgb(0, 0, 0);
}

.userheader img {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
}

/* 用户点赞喜欢样式 */
.user_n {
  display: flex;
  font-size: 16px;
  margin: 10px 0;
}

.user_n .un {
  font-weight: 700;
  margin-right: 3px;
}

.user_like {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  margin-right: 16px;
}

.user_like svg {
  width: 30px;
  height: 30px;
  fill: rgb(249, 24, 128);
}
.user_fo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  margin-right: 16px;
}

.user_fo svg {
  width: 30px;
  height: 30px;
  fill: rgba(29, 155, 240, 1);
}

.user_quote {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  margin-right: 16px;
}

.user_quote svg {
  width: 30px;
  height: 30px;
  fill: rgba(0, 186, 124, 1);
}
.post_info {
  display: flex;
  width: 100%;
  flex: 1;
  margin-top: 10px;
}

.user_info {
  display: flex;
  width: 100%;
  flex: 1;
  margin-top: 15px;
}

.emot {
  width: 24px;
  height: 24px;
}
</style>